<!--
 * @Description:
 * @Date: 2024-07-03 08:52:32
 * @LastEditTime: 2024-07-23 17:20:48
-->
<template>
  <!-- 搜索工作栏 -->
  <ContentWrap>
    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams">
      <!-- 新增等操作按钮 -->
      <template #actionMore>
        <el-button
          class="btnsearch"
          type="primary"
          plain
          @click="openForm('create')"
          v-hasPermi="['country:disclosure-affairs:create']"
        >
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
      </template>
    </Search>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <Table
      :columns="allSchemas.tableColumns"
      :data="tableObject.tableList"
      :loading="tableObject.loading"
      :pagination="{
        total: tableObject.total
      }"
      v-model:pageSize="tableObject.pageSize"
      v-model:currentPage="tableObject.currentPage"
    >
      <template #labelType="{ row }">
        <dict-tag :type="DICT_TYPE[dictType[row['type']]]" :value="row.labelType" />
      </template>
      <template #stick="{ row }">
        <Icon
          icon="ep:upload"
          :color="row.stick ? '#3C87EF' : '#8E8E8E'"
          :size="26"
          @click="handleStick(row.id, row.stick)"
        />
      </template>
      <template #largeScreen="{ row }">
        <el-checkbox
          v-model="row.largeScreen"
          @change="handleLargeScreen(row.id, row.largeScreen)"
        />
      </template>
      <template #action="{ row }">
        <el-button
          link
          type="primary"
          @click="openDetails(row.id)"
          v-hasPermi="['country:disclosure-affairs:query']"
        >
          详情
        </el-button>
        <el-button
          link
          type="primary"
          @click="openForm('update', row.id)"
          v-hasPermi="['country:disclosure-affairs:update']"
        >
          编辑
        </el-button>
        <el-button
          link
          type="danger"
          v-hasPermi="['country:disclosure-affairs:delete']"
          @click="handleDelete(row.id)"
        >
          删除
        </el-button>
      </template>
    </Table>
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <ReportForm ref="formRef" @success="getList" />
  <Details ref="detailsRef" />
</template>
<script setup lang="ts" name="Report">
import { ElMessage, ElMessageBox } from 'element-plus'
import Details from './details.vue'
import { allSchemas } from './report.data'
import * as ReportApi from '@/api/countryside/disclosureaffairs/index'
import ReportForm from './ReportForm.vue'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { updateDisplay } from '@/api/countryside/disclosureaffairs/index'
// tableObject：表格的属性对象，可获得分页大小、条数等属性
// tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
// 详细可见：https://doc.crc.cn/vue3/crud-schema/
const { tableObject, tableMethods } = useTable({
  getListApi: ReportApi.getReportPage, // 分页接口
  delListApi: ReportApi.deleteReport // 删除接口
})
const dictType = {
  1: 'SYSTEM_CUNWU_TYPE',
  2: 'SYSTEM_DANGWU_TYPE',
  3: 'SYSTEM_CAIWU_TYPE'
}

// 获得表格的各种操作
const { getList, setSearchParams } = tableMethods

/** 添加/修改操作 */
const formRef = ref()
const detailsRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}
const openDetails = (id?: number) => {
  detailsRef.value.open(id)
}
/** 删除按钮操作 */
const handleDelete = (id: number) => {
  tableMethods.delList(id, false)
}
/**
 * @description: 置顶处理
 * @return {*}
 */
const handleStick = (id, state) => {
  ElMessageBox.confirm(state ? '取消条数据置顶' : '设置数据置顶', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await ReportApi.updateStick(id, !state)
      ElMessage({
        type: 'success',
        message: state ? '取消置顶成功' : '设置置顶成功'
      })
      getList()
    })
    .catch((msg) => {})
}
/**
 * @description: 大屏展示
 * @return {*}
 */

const handleLargeScreen = (id, state) => {
  ElMessageBox.confirm(state ? '设置为大屏展示' : '取消设置为大屏展示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await ReportApi.updateDisplay(id, state)
      ElMessage({
        type: 'success',
        message: state ? '大屏展示成功' : '取消大屏展示成功'
      })
      getList()
    })
    .catch((msg) => {
      getList()
    })
}
/** 初始化 **/
onMounted(() => {
  getList()
})
</script>
